<template>
    <div id="shoplist">
            <div class="shoplist_">
                    <ul>
                            <li>
                                    <el-button>全部商品&nbsp;&nbsp; 582</el-button>
                            </li>
                            <li>
                                    <el-button>雪票&nbsp;&nbsp; 8</el-button>
                            </li>
                            <li>
                                    <el-button>教练&nbsp; &nbsp; 41</el-button>
                            </li>
                            <li>
                                    <el-button>酒店&nbsp;&nbsp; 21</el-button>
                            </li>
                            <li>
                                    <el-button>卡类&nbsp;&nbsp; 495</el-button>
                            </li>
                    </ul>

            </div>
            <div class="shoplist_table">
       <transition name="el-zoom-in-top"><Setcard v-if="order_show_card" class="order_card"></Setcard></transition>
                    <div class="shoptext">订单列表</div>
                    <ul class="shop_icon">
                <transition name="el-fade-in-linear"> <li v-show="sousuok"><el-input v-model="input1" class="sousuo"></el-input></li></transition>
                            <li><img @click="getsousuo" src="../image/放大镜.png" alt=""></li>

                            <li><img @click="order_shuaxin" src="../image/24px.png" alt=""></li>
                            <li><img @click="get_show_card" src="../image/16px.png" alt=""></li>
                    </ul>

                    <div class="el_table_shop">
                            <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                                    style="width: 100%" ref="multipleTable" tooltip-effect="dark"
                                  >

                                    <el-table-column prop="date" label="订单编号" width="180">
                                    </el-table-column>
                                    <el-table-column prop="name" sortable label="名称" width="180">
                                    </el-table-column>
                                    <el-table-column prop="fenlei" label="分类">
                                    </el-table-column>
                                    <el-table-column prop="money" label="金额">
                                    </el-table-column>
                                    <el-table-column prop="zhuangtai" label="状态">

                                    </el-table-column>
                                    <el-table-column prop="time" width="100"  label="下单时间">
                                    </el-table-column>
                                    <el-table-column label="买家">
                                            <template slot-scope="scope">
                                                    <span style="margin-left: 2px">{{ scope.row.shangxiajia
                                                            }}</span>
                                            </template>
                                    </el-table-column>
                                    <el-table-column label="手机号">
                                            <template slot-scope="scope">

                                                    <span class="caozuo" style="margin-left: 2px">{{
                                                            scope.row.caozuo }}</span>
                                            </template>
                                    </el-table-column>
                                    <el-table-column prop="address" label="收藏量">
                                            <!-- <el-button>详情</el-button> -->
                                    </el-table-column>
                            </el-table>
                            <el-button>多选</el-button>
                            <div class="fenye">
                                    <el-pagination background @current-change="current_change"
                                            layout="prev, pager, next" :total="total">
                                    </el-pagination>
                            </div>

                    </div>
            </div>
    </div>
</template>
<script>
    import Setcard from "../components/Setcard.vue"
    export default {
            components:{Setcard},
            data() {
                    return {
                            order_show_card:false,
                            input1:"",
                            sousuok:false,
                            tableData: [],
                            multipleSelection: [],
                            total: 160,
                            pagesize: 10,
                            currentPage: 1,
                            tableData: [{
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '215',
                                    fenlei: "待使用",
                                    money: "380",
                                    zhuangtai: "待使用",
                                    time: "2021/2/18",
                                    shangxiajia: "白岩树",
                                    caozuo: "13584572546",
                            }, {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票",
                                    money: "380",
                            }, {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票",
                                    money: "380",
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },
                            {
                                    date: 'XP184217',
                                    name: '1小时滑雪体验票',
                                    address: '',
                                    fenlei: "雪票"
                            },


                            ]
                    }
            },
            methods: {
                    addUser() {
                            this.$http({
                                    method: 'GET',
                                    url: 'http://127.0.0.1:8080/api/users',
                            }).then(res => {
                                    console.log(res);
                                    if (!res.data.errno) {
                                            this.tableData = res.data.data.users;
                                            this.total = res.data.totalnum;
                                    }
                            })
                                    .catch(function (error) {
                                            console.log(error);
                                    });
                    },

                    current_change: function (currentPage) {
                            this.currentPage = currentPage;
                    },
                    getsousuo(){
                            this.sousuok=!this.sousuok
                            this.order_show_card=false
                    },
                    order_shuaxin(){
                            window.location.reload();
                    },
                    get_show_card(){
                            this.order_show_card=!this.order_show_card
                            this.sousuok=false
                    },
                    mounted: function () {
                            this.addUser();
                    }
            }

    }
</script>
<style scoped>
.order_card{
position: absolute;
right: 20px;
z-index: 2;
top: 150px;
}
      div /deep/  .el-input__inner {
-webkit-appearance: none;
background-color:#F2F2F2;
background-image: none;
border-radius: 4px;
border: 1px solid #DCDFE6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
/* height: 10px; */
height: 24px;
line-height: 40px;
outline: 0;
padding: 0 15px;
-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
}
    .div /deep/ element.style {}

    .el-table th.el-table__cell>.cell {
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            vertical-align: middle;
            padding-left: 10px;
            padding-right: 10px;
            width: 100%;
            color: black;
    }


    .fenye {
            position: absolute;
            right: 0;
            bottom: 60px;
    }

    div /deep/ tr.el-table__row {
            height: 56px;
    }

    .el_table_shop {
            width: 1184px;
            height: 744px;
            /* background-color: skyblue; */
            margin-left: 20px;
            position: relative;
    }

    .shop_icon {
            list-style: none;
            display: inline-block;
            float: right;
            margin-top: 20px;
            margin-right: 20px;
    }

    .shop_icon>li {
            padding: 0 5px;
            display: inline-block;
            cursor: pointer;
    }

    #shoplist {
            overflow: hidden;
    }

    .shoptext {
            font-size: 20px;
            font-weight: 700;
            margin-top: 20px;
            margin-left: 20px;
            display: inline-block;
    }

    .shoplist_table {
            width: 1232px;
            height: 750px;
            background-color: #fff;
            margin-top: 25px;
            overflow: hidden;
    }

    .shoplist_ {
            width: 1077px;
            height: 36px;
            /* background-color: pink; */
            margin-top: 40px;
            margin-left: 15px;
    }

    .shoplist_>ul {
            list-style: none;

    }

    .shoplist_>ul>li {
            float: left;
            margin-left: 10px;
    }
</style>